<template>
  <div class="table">
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search_word" size="mini" placeholder="请输入搜索关键词" class="handle-input"></el-input>
        <el-button type="primary" @click="dialogVisible = true">添加歌手</el-button>
        <el-button type="danger" @click="deleteMoreButton">批量删除</el-button>
      </div>
      <el-dialog title="添加歌单" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="主题" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="风格" prop="style">
            <el-input type="textarea" v-model="ruleForm.style"></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="introduction">
            <el-input v-model="ruleForm.introduction" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSongList()">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog title="修改歌单" :visible.sync="editVisible" width="30%" :before-close="handleClose">
        <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="主题" prop="title">
            <el-input v-model="editForm.title"></el-input>
          </el-form-item>
          <el-form-item label="风格" prop="style">
            <el-input type="textarea" v-model="editForm.style"></el-input>
          </el-form-item>
          <el-form-item label="简介" prop="introduction">
            <el-input v-model="editForm.introduction" type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSongList">确 定</el-button>
        </span>
      </el-dialog>



      <el-table border :data="this.data" ref="multipleTable" border style="width: 100%" height="630px"
        @selection-change="deleteMore">
        <el-table-column width="30px" type="selection"></el-table-column>
        <el-table-column align="center" label="图片" width="180">
          <template slot-scope="scope">
            <div class="song-img">
              <img :src="getUrl(scope.row.pic)" alt="图片" style="width: 100%;">
            </div>
            <el-upload class="upload-demo" :action="uploadPic(scope.row.id)" :show-file-list="false" :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <el-button type="success," size="mini">更新图片</el-button>
            </el-upload>


          </template>
        </el-table-column>

        <el-table-column align="center" label="主题">
          <template slot-scope="scope">
            {{scope.row.title}}
          </template>
        </el-table-column>

        <el-table-column align="center" label="风格">
          <template slot-scope="scope" size="mini">
            {{scope.row.style}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="简介">
          <template slot-scope="scope" size="mini">
            <div style="height: 150px; overflow: scroll">
              {{scope.row.introduction}}
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="管理">
          <template slot-scope="scope">
            <el-button  @click="manage(scope.row.id)">点击管理</el-button>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="editSongListButton(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="delSongListButton(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination align="center" @current-change="handleCurrentChange" background layout="total, prev, pager, next"
          :current-page="currentPage" :page-size="pageSize" :total="tableData.length">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
  import {
    mixin
  } from '../mixins/index.js'
  export default {
    mixins: [mixin],
    name: 'songList',
    data() {
      return {
        dialogVisible: false,
        editVisible: false,
        currentPage: 1,
        pageSize: 5,
        search_word: '',
        tableData: [],
        tempData: [],
        multipleSelect: [],
        ruleForm: {
          title: '',
          introduction: '',
          style: ''
        },
        editForm: {
          title: '',
          introduction: '',
          style: ''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入主题',
            trigger: 'blur'
          }],
          introduction: [{
            required: true,
            message: '请输入简介',
            trigger: 'blur'
          }],
          style: [{
            required: true,
            message: '请输入风格',
            trigger: 'blur'
          }],
        },
      }
    },
    computed: {
      // 计算当前表格中的数据
      data() {
        return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      }
    },
    watch: {
      search_word: function() {
        if (this.search_word == '') {
          this.tableData = this.tempData;
        } else {
          this.tableData = [];
          for (let item of this.tempData) {
            if (item.title.includes(this.search_word)) {
              this.tableData.push(item);
            }
          }
        }
        this.currentPage = 1;
      }
    },
    created() {
      this.getData();
    },
    methods: {
      manage(id){
        this.$router.push({
          path:"songAndSongList",
          query:{"songListId":id}
        })
      },
      handleCurrentChange(page) {
        this.currentPage = page;
      },
      deleteMore(more) {
        this.multipleSelect = more;
      },
      deleteMoreButton() {
        if (confirm("删除之后不可恢复，你确定要批量删除！")) {
          let ids = [];
          for (let item of this.multipleSelect) {
            ids.push(item.id);
          }
          let delData = {
            "ids": ids
          }
          this.axios.post(this.$store.state.HOST + '/songList/delete', delData, {}).then((res) => {
            if (res.data.code == 1) {
              this.$message.success("批量删除成功");
              this.getData();
            } else {
              this.$message.error("批量删除失败");
            }
          })
        }
      },
      uploadPic(id) {
        return this.$store.state.HOST + '/songList/updateSongListPic?id=' + id;
      },
      editSongListButton(row) {
        this.editForm.title = row.title;
        this.editForm.style = row.style;
        this.editForm.introduction = row.introduction;
        this.editForm.id = row.id;
        this.editVisible = true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      editSongList() {
        let data = {
          "id": this.editForm.id,
          "title": this.editForm.title,
          "style": this.editForm.style,
          "introduction": this.editForm.introduction
        };
        this.axios.post(this.$store.state.HOST + '/songList/update', data, {}).then((res) => {
          if (res.data.code == 1) {
            this.$message.success("修改成功");
            this.getData();
            this.editVisible = false;
          } else {
            this.$message.error("修改失败");
          }
        })
      },
      delSongListButton(id) {
        this.delSongListId = id;
        let ids = [];
        ids.push(this.delSongListId);
        let delData = {
          'ids': ids
        }
        if (confirm("删除之后不可恢复，你确定要删除它！")) {
          this.axios.post(this.$store.state.HOST + '/songList/delete', delData, {}).then((res) => {
            if (res.data.code == 1) {
              this.$message.success("删除成功");
              this.getData();
            } else {
              this.$message.error("删除失败");
            }
          })
        }
      },
      addSongList() {
        let data = {
          "title": this.ruleForm.title,
          "introduction": this.ruleForm.introduction,
          "style": this.ruleForm.style
        };
        this.axios.post(this.$store.state.HOST + '/songList/add', data, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then((res) => {
          if (res.data.code == 1) {
            this.$message.success('添加成功！');
            this.getData();
            this.dialogVisible = false;
          } else {
            this.$message.error('添加失败');
          }
        })
      },
      getData() {
        this.axios.get(this.$store.state.HOST + '/songList/findAll').then((res) => {
          if (res.data.code == 1) {
            this.tableData = res.data.data;
            this.tempData = res.data.data;
          } else {
            this.$message.error("数据加载失败");
          }
        })
      }
    },
  }
</script>

<style>
  .handle-box {
    margin-bottom: 5px;
  }

  .song-img {
    width: 100%;
    height: 80px;
    border-radius: 5px;
    margin-bottom: 5px;
    overflow: hidden;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .play {
    position: absolute;
    z-index: 100;
    width: 80px;
    height: 80px;
    top: 18px;
    left: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .icon {
    width: 2em;
    height: 2em;
    color: white;
    fill: currentColor;
    overflow: hidden;
  }

  .pagination {
    display: flex;
    justify-content: center;
  }
</style>
